{extend name="common/base" /}

{block name="style"}
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.css">

<link rel="stylesheet" href="__CDN__/html/css/scroll.css">
<style type="text/css">
    body{
        background: #F5F5F5;
    }
    .img-div{
        width:0.3rem;
        height:0.3rem;
        float: left;
    }

</style>
{/block}
{block name="toindex"}
{/block}
{block name="body"}
<div class='smrz-bj'>
    <div class="sy-mains">
        <div class="sy-top">
            <div class="swiper-container" style="height:1.55rem;padding-bottom:0;">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    {foreach $banner_list as $vo }
                    <div class="swiper-slide">
                        {if ($vo['jump_type']==1)}
                        <a href="{$vo.ad_link}">
                            {/if}
                            <img src="__OSSCDN__{$vo.ad_img}" />
                            {if ($vo['jump_type']==1)}
                        </a>
                        {/if}
                    </div>
                    {/foreach}
                </div>
            </div>
            <!--<img src="__CDN__/html/img/hz-img11.png">-->
        </div>
        <div class="sy-top-xx">

            <div class="xx-list" {empty name="$banner_text_list"}style="display:none;"{/empty}>
                 <img src="__CDN__/html/img/hz-img19.png" class="xx-img" style="float:left;margin-top: 0.1rem;">
                <ul class="_container" id="ad-text" style="width:auto;float:left;" >

                    {foreach $banner_text_list as $vo }
                    <li style='width:100%;overflow: hidden;font-size:0.13rem;'>
                        <a href="{$vo.ad_link}">
                            <div style="width:auto;float: left;">
                                <span class="xx-span">{$vo.ad_title}</span>
                            </div>
                            <div class="sxx-span2" style="width:auto;float: left;color:#333333;">{$vo.ad_subtitle}</div>
                        </a>
                    </li>
                    {/foreach}

                </ul>
            </div>

            <ul class="xx-nav" style="width:100%;">
                <a href="{:url('box/apply')}">
                    <li>
                        <img src="__CDN__/html/img/hz-img20.png" class="img1">
                        <p class="xx-li-p">魔盒申请</p>
                    </li>
                </a>
                <a href="{:url('box/index')}">
                    <li>
                        <img src="__CDN__/html/img/hz-img21.png" class="img2">
                        <p class="xx-li-p xx-li-ps">魔盒补货</p>
                    </li>
                </a>
                <a href="{:url('My/index')}">
                    <li>
                        <img src="__CDN__/html/img/hz-img22.png" class="img3">
                        <p class="xx-li-p">魔盒个人</p>
                    </li> 
                </a>
            </ul>
        </div>

        <div class="sy-gw">
            <input type="hidden" id="cate_id" value="{$cate_id}" >
            <ul class="sy-gw-left">
                {foreach $cate_list as $vo }
                <li {eq name="$vo['index_num']" value="0" } class="active" {/eq} >{$vo['cate_title']}</li>
                {/foreach}
            </ul>
            <ul class="sy-gw-rig">
                {foreach $cate_list as $row }
                <div class="left_li {eq name="$row['index_num']" value="$last_cate"}min-hg{/eq}" id="left_li{$row['index_num']}">
                     {foreach $row.goods_list as $vo }
                     <li>
                                 <img data-id="{$vo.goods_id}" src="__OSSCDN__{$vo.goods_logo}" class="rig-img js-show-detail">
                                 <div class="gw-rig-div">
                                     <p class="rig-div-p js-show-detail" data-id="{$vo.goods_id}" >【{$vo.brand_title}】{$vo.goods_title}{notempty name="$vo.goods_model"},{$vo.goods_model}{/notempty}{notempty name="$vo.goods_spec"},{$vo.goods_spec}{/notempty}</p>
                                     <div class="rig-bottom">
                                         <span class="rig-span">¥{$vo.selling_price}</span>
                                         <div class="sz-jg">
                                             <div class="img-div change-num js-dec-num-{$vo['goods_id']}"data-id="{$vo['goods_id']}" data-type="0" data-ope="0" {if $vo['buy_num'] ==0 }style="display:none;"{/if}>
                                                  <img src="__CDN__/html/img/hz-img26.png"  class="img-jg" style="float:right;" >
                                             </div>
                                             <input type="text" value="{$vo.buy_num}" class="text-inp js-goods-num-{$vo['goods_id']}" {if $vo['buy_num'] ==0 }style="display:none;"{/if}  disabled="disabled">
                                                    <div data-id="{$vo['goods_id']}" data-type="0" data-ope="1" class="img-div change-num js-inc-num-{$vo['goods_id']}">
                                                 <img src="__CDN__/html/img/hz-img23.png" class="img-jg">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </li>
                             {/foreach}

                         </div>
                         {/foreach}

                </ul>

            </div>
        </div>

        <div class="sy-bottom">
            <div class="bottom-img js-show-cart">
                <img src="__CDN__/html/img/hz-img24.png">
                <div class="num js-goods-total-num">{$cart.num}</div>
            </div>
            <div class="bottom-qian js-goods-total-price">合计：{$cart.total_price}元</div>
            <div id="js-no-goods" {gt name="$cart['num']" value="0"}style="display:none;"{/gt}><div class="bottom-bot" style="background:#F5F5F5;color: #9c9c9c;">请选购</div></a></div>
            <div id="js-confirm-goods" {eq name="$cart['num']" value="0"}style="display:none;"{/eq}><a href="{:url('Cart/comfirmOrder')}"><div class="bottom-bot">去结算</div></a></div>
        </div>

        <!-- 弹框 -->
        <div class="sy-tank" style="z-index:1;display: none;"></div>
        <div class="sy-tk-list" style="z-index:2;display: none;">
            <div class="gb"><img src="__CDN__/html/img/hz-img25.png" class="tk-img js-close"></div>
            <img src="__CDN__/html/img/hz-img11.png" class="tk-img2 js-goods-logo">
            <div class="tk-wenz">
                <p class="wenz-ps js-title"></p>
                <p class="wenz-ps2 js-desc"></p>   
                <div class="tk-sz">
                    <div class="sz-sz js-price"></div>
                    <div class="sz-jg">
                        <div data-id="0" data-type="1" data-ope="0" class="img-div js-detail-btn change-num js-tk-dec">
                            <img src="__CDN__/html/img/hz-img26.png" class="img-jg" style="float:right;">
                        </div>
                        <input type="text" value="0" class="text-inp js-tk-buynum"  disabled="disabled">
                        <div data-id="0" data-type="1" data-ope="1" class="img-div js-detail-btn change-num js-tk-inc">
                            <img src="__CDN__/html/img/hz-img23.png" class="img-jg">
                        </div>
                    </div>
                </div>      
            </div>
        </div>
        <!-- 弹框2 -->
        <div class="gw-mains" style="z-index:2;display: none;">
            <h2 class="gw-h2 js-goods-total-num-h2">已选商品（5）</h2>
            <ul class="gw-nav">
                <li>
                    <p class="gw-p">【农夫山泉】饮用天然水，5L/桶</p>
                    <p class="gw-p2">¥4.00</p>
                    <div class="sz-jg">
                        <img src="__CDN__/html/img/hz-img26.png" class="img-jg">
                        <input type="text" value="1" class="text-inp"  disabled="disabled">
                        <img src="__CDN__/html/img/hz-img23.png" class="img-jg">
                    </div>           
                </li>
            </ul>
            <div class="sy-bottom">
                <div class="bottom-img">
                    <img src="__CDN__/html/img/hz-img24.png">
                    <div class="num js-goods-total-num">{$cart.num}</div>
                </div>
                <div class="bottom-qian">合计：{$cart.total_price}元</div>
                <a href="{:url('Cart/comfirmOrder')}"><div class="bottom-bot">去结算</div></a>
            </div>       
        </div>
    </div>
    {/block}
    {block name="script"}
    <script src="__CDN__/html/js/swiper.js"></script>
    <script src="__CDN__/html/js/scroll.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //    mui('.mui-scroll-wrapper').scroll({
        //        deceleration: 0.1, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006 
        //        indicators: false  //隐藏一条滚动条 增大减速系数。。。
        //    });
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 10000
        });
        myScroll.upScroll("ad-text", "-36px", 3000);

    </script>
    <script>
        mui('body').on('tap', 'a', function () {
            window.top.location.href = this.href;
        });
        $(function () {
            var myheight = $(window).height();
            $('.min-hg').css('min-height', myheight * 0.9);


            mui('body').on('tap', ".change-num", function (res) {
                var id = $(this).attr('data-id');
                var ope = $(this).attr('data-ope');
                var type = $(this).attr('data-type'); //操作类型 0-列表 1-详情

                $.post("{:url('Cart/change')}", {goods_id: id, ope: ope}, function (res) {
                    if (res.code == '0') {
                        mui.toast(res.msg);
                    } else {
                        if (res.code == '80') {
                            if (type == 1) {
                                $('.js-tk-buynum').hide();
                                $('.js-tk-dec').hide();
                                $('.js-tk-buynum').val(0);
                            }

                            //删除
                            $('.js-goods-num-' + id).hide();
                            $('.js-dec-num-' + id).hide();
                            $('.js-goods-num-' + id).val(0);
                        } else if (res.code == '81') {
                            if (type == 1) {
                                $('.js-tk-buynum').show();
                                $('.js-tk-dec').show();
                                $('.js-tk-buynum').val(1);
                            }
                            //新增
                            $('.js-goods-num-' + id).show();
                            $('.js-dec-num-' + id).show();
                            $('.js-goods-num-' + id).val(1);
                        } else if (res.code == '82') { //库存不足
                            $('.js-inc-num-' + id).hide();
                            mui.toast(res.msg);
                            return;
                        } else {

                            //正常增减
                            var num = $('.js-goods-num-' + id).val();
                            if (ope == 1) {
                                num++;
                            } else {
                                num--;
                                $('.js-inc-num-' + id).show();
                            }
                            if (type == 1) {
                                $('.js-tk-buynum').val(num);
                            }
                            $('.js-goods-num-' + id).val(num);
                        }
                        if (type == 3) {
                            $.post("{:url('Index/cart')}", {}, function (res) {
                                if (res) {
                                    $('.gw-mains').html(res);
                                } else {
                                    hideAll();
                                }

                            }, 'json');
                        }

                        if (res.data.num > 0) {
                            $('#js-confirm-goods').show();
                            $('#js-no-goods').hide();
                        } else {
                            $('#js-confirm-goods').hide();
                            $('#js-no-goods').show();
                        }

                        changeTotal(res.data.num, res.data.total_price);
                    }
                }, 'json');
            });
            //排序
            mui('body').on('tap', ".js-show-detail", function (res) {
                var id = $(this).attr('data-id');
                $.post("{:url('Cart/getGoodsDetailById')}", {id: id}, function (res) {
                    if (res.code == '1') {

                        $('.js-tk-buynum').val(0);
                        $('.js-tk-buynum').hide();
                        $('.js-tk-dec').hide();
                        if (res.data.buy_num > 0) {
                            $('.js-tk-buynum').show();
                            $('.js-tk-dec').show();
                            $('.js-tk-buynum').val(res.data.buy_num);
                        }
                        $('.sy-tank').show();
                        $('.sy-tk-list').show();
                        $('.js-goods-logo').attr("src", '__OSSCDN__' + res.data.goods_logo);
                        var title = "【" + res.data.brand_title + "】" + res.data.goods_title;
                        
                        if(res.data.goods_model){
                            title+=',' + res.data.goods_model;
                        }
                        if(res.data.goods_spec){
                            title+=',' + res.data.goods_spec;
                        }
                        $(".js-title").html(title);
                        $(".js-desc").html(res.data.goods_desc);
                        $(".js-price").html("¥" + res.data.selling_price);
                        $('.js-detail-btn').attr("data-id", res.data.goods_id);
                    } else {
                        mui.toast(res.msg);
                    }
                }, 'json');
            });
            mui('body').on('tap', ".gw-h2", function (res) {
                hideAll();
            });
            function hideAll() {
                $('.sy-tank').hide();
                $('.sy-tk-list').hide();
                $('.gw-mains').hide();
            }

            function changeTotal(num, price) {
                $(".js-goods-total-num").html(num);
                $(".js-goods-total-num-h2").html("已选商品（" + num + "）");
                $(".js-goods-total-price").html("合计：" + price + "元");
            }
            $('.sy-tank').on('click', function () {
                hideAll();
            });
            $('.js-close').on('click', function () {
                hideAll();
            });
            $('.js-show-cart').on('click', function () {
                $.post("{:url('Index/cart')}", {}, function (res) {
                    if (res) {
                        $('.sy-tank').show();
                        $('.gw-mains').html(res);
                        $('.gw-mains').show();
                    }
                }, 'json');
            });
            $('.js-login').on('click', function () {
                var phone = $('.js-phone').val();
                var password = $('.js-password').val();
                var backurl = $('.js-back-url').val();
                if (!is_mobile(phone)) {
                    mui.alert('请填写正确格式手机号');
                    return false;
                }
                if (!password) {
                    mui.alert('请填写密码');
                    return false;
                }
                $.post("{:url('Pub/login')}", {phone: phone, password: password, backurl: backurl}, function (res) {
                    if (res.code == '1') {
                        location.href = res.url;
                    } else {
                        mui.toast(res.msg);
                    }
                }, 'json');
            });
        });

    </script>

    <script type="text/javascript">

        /* 滚动监听 */
        // 定义一个获取所有div的距离高度
        var arrOffsetTop = [];

        $(".left_li").each(function () {
            var top = $(this).offset().top;
            arrOffsetTop.push(top);
        });

        // 获取每个div的平均高度
        var fTotalHgt = 0;
        for (var i = 0; i < $('.left_li').length; i++) {
            fTotalHgt += $('.left_li').eq(i).outerHeight();
        }
        var fAverageHgt = parseFloat(fTotalHgt / $('.left_li').length);
        var is_scroll = 0;
        // 滚动事件(每次滚动都做一次循环判断)
        $(window).scroll(function () {

            //滚动730px，左侧导航固定定位
            if ($(window).scrollTop() > 270) {
                $('.sy-gw-left').css({'position': 'fixed', 'top': 0});
            } else {
                $('.sy-gw-left').css({'position': '', 'top': ''});
            }
            if (is_scroll == 0) {
                for (var i = 0; i < $('.left_li').length; i++) {
                    if ($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 减去一个固定值，是定位准确点

                        $('.sy-gw-left').find('li').eq(i).addClass('active').siblings().removeClass('active');
                    }
                }
            }
        });

        /* 点击事件 */
        $('.sy-gw-left').find('li').click(function () {
            is_scroll = 1;
            $(this).addClass('active').siblings().removeClass('active');

            $('.sy-gw-rig').scrollTop(arrOffsetTop[$(this).index()]);
            $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()] - 10}, 500, 'swing', function () {
                is_scroll = 0;
            });
        });
    </script>
    {/block}